<!--
  *@Description : In user setting edit
  *@author 萧红
  *@date 2020-03-10 19:00
  *@LastEditTime 2020-03-10 19:00
  *@LastEdititors
-->
<template>
    <div id="bottom">
      <div @click="handClick(0)" class="item">
        <div>
          <span class="iconfont iconzhuye"></span>
        </div>
        <div>首页</div>
      </div>
      <div @click="handClick(1)" class="item">
        <div>
          <span class="iconfont iconshanzi"></span>
        </div>
        <div>发现</div>
      </div>
      <div class="add-btn" @click="toNewPage('/addDongTai')">
        <span class="iconfont iconjia-copy"></span>
      </div>
      <div @click="handClick(2)" class="item">
        <div>
          <span class="iconfont iconshangcheng"></span>
        </div>
        <div>商城</div>
      </div>
      <div @click="handClick(3)" class="item">
        <div>
          <span class="iconfont iconwodedangxuan-a0"></span>
        </div>
        <div>我的</div>
      </div>
    </div>
</template>

<script>
export default {
  name: 'Bottom',
  props: {
    selectIndex: {
      required: true,
      type: Number
    }
  },
  mounted () {
    let item = document.querySelectorAll('#bottom .item')
    let element = item[this.selectIndex]
    element.classList.add('selected')
  },
  methods: {
    handClick (index) {
      // 如果单击的是当前标签什么都不做
      if (this.selectIndex === index) {
        return false
      } else {
        switch (index) {
          case 0: this.toNewPage('/home')
            break
          case 1: this.toNewPage('/find')
            break
          case 2: this.toNewPage('/shop')
            break
          case 3: this.toNewPage('/my')
            break
        }
      }
      // if (element.classList.i)
    }
  }
}
</script>

<style scoped lang="stylus">
#bottom
{
  width 100%;
  padding 4px 4px
  position: fixed;
  bottom: 0;
  height: 40px;
  z-index 9999
  background white
  display: grid;
  grid-template-columns repeat(5,16%)
  grid-column-gap 4%;
  border-top: 1px solid #f0f0f0;
  padding-top 10px
  & > div
  {
    div
    {
      height 20px;
      line-height 20px
      letter-spacing 10px
      span
      {
        font-size:20px;
      }
    }
  }
  .add-btn
  {
    color  deeppink
    position relative
    span
    {
      font-size:44px
      position absolute
      left:50%;
      top:-4px;
      transform translateX(-50%);
    }
  }
  .selected
  {
    color:deeppink
  }
}
</style>
